<!DOCTYPE html>   
<html lang="zh-CN">   
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时程序</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f5f5f5;
            margin: 0;
        }
        
        .countdown-container {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        
        .countdown-title {
            font-size: 24px;
            margin-bottom: 20px;
            color: #333;
        }
        
        .countdown-input {
            margin-bottom: 20px;
        }
        
        .countdown-display {
            display: flex;
            justify-content: center;
            gap: 15px;
        }
        
        .countdown-box {
            background-color: #2c3e50;
            color: white;
            padding: 15px;
            border-radius: 5px;
            min-width: 80px;
        }
        
        .countdown-value {
            font-size: 36px;
            font-weight: bold;
        }
        
        .countdown-label {
            font-size: 14px;
            margin-top: 5px;
        }
        
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 20px;
            transition: background-color 0.3s;
        }
        
        button:hover {
            background-color: #2980b9;
        }
    </style>   
</head>   
<body>
    <div class="countdown-container">
        <div class="countdown-title">倒计时程序</div>
        
        <div class="countdown-input">
            <label for="target-date">设置目标日期和时间：</label>
            <input type="datetime-local" id="target-date">
            <button id="start-btn">开始倒计时</button>
        </div>
        
        <div class="countdown-display">
            <div class="countdown-box">
                <div class="countdown-value" id="days">00</div>
                <div class="countdown-label">天</div>
            </div>
            <div class="countdown-box">
                <div class="countdown-value" id="hours">00</div>
                <div class="countdown-label">小时</div>
            </div>
            <div class="countdown-box">
                <div class="countdown-value" id="minutes">00</div>
                <div class="countdown-label">分钟</div>
            </div>
            <div class="countdown-box">
                <div class="countdown-value" id="seconds">00</div>
                <div class="countdown-label">秒</div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('start-btn').addEventListener('click', startCountdown);
        
        function startCountdown() {
            const targetDateInput = document.getElementById('target-date').value;
            
            if (!targetDateInput) {
                alert('请先设置目标日期和时间');
                return;
            }
            
            const targetDate = new Date(targetDateInput).getTime();
            
            // 立即更新一次显示
            updateCountdown(targetDate);
            
            // 设置定时器，每秒更新一次
            const countdownInterval = setInterval(() => {
                updateCountdown(targetDate);
                
                // 检查是否到达目标时间
                const now = new Date().getTime();
                if (now >= targetDate) {
                    clearInterval(countdownInterval);
                    document.getElementById('days').textContent = '00';
                    document.getElementById('hours').textContent = '00';
                    document.getElementById('minutes').textContent = '00';
                    document.getElementById('seconds').textContent = '00';
                    alert('倒计时结束！');
                }
            }, 1000);
        }
        
        function updateCountdown(targetDate) {
            const now = new Date().getTime();
            const distance = targetDate - now;
            
            if (distance < 0) return;
            
            // 计算天、小时、分钟、秒
            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);
            
            // 更新显示
            document.getElementById('days').textContent = formatTime(days);
            document.getElementById('hours').textContent = formatTime(hours);
            document.getElementById('minutes').textContent = formatTime(minutes);
            document.getElementById('seconds').textContent = formatTime(seconds);
        }
        
        function formatTime(time) {
            return time < 10 ? `0${time}` : time;
        }
    </script>   
</body>   
</html>
